<template>
  <div class="reset-password-container">
    <el-card class="box-card">
      <template #header>
        <div class="card-header">
          <span>找回密码</span>
        </div>
      </template>
      <el-form ref="resetFormRef" :model="resetForm" :rules="resetRules" label-width="120px">
        <el-form-item label="用户名或邮箱*" prop="username">
          <el-input v-model="resetForm.username" placeholder="请输入用户名"></el-input>
        </el-form-item>
        <!-- <el-form-item label="邮件验证码">
          <el-row :gutter="20">
            <el-col :span="16">
              <el-input v-model="resetForm.emailCode" placeholder="邮件验证码"></el-input>
            </el-col>
            <el-col :span="8">
              <el-button @click="sendEmailCode" :disabled="countDown > 0">
                {{ countDown > 0 ? `${countDown}s后重试` : '发送验证码' }}
              </el-button>
            </el-col>
          </el-row>
        </el-form-item> -->
        <el-form-item label="密码*" prop="new_password">
          <el-input type="password" v-model="resetForm.new_password" placeholder="请输入新密码"></el-input>
        </el-form-item>
        <el-form-item label="确认密码*" prop="second_password">
          <el-input type="password" v-model="resetForm.second_password" placeholder="请再次输入新密码"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleResetPassword">重置密码</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <div class="footer-links">
      <el-link href="#" underline="hover" @click="gethome">首页</el-link>
      <el-link href="#" underline="hover" @click="Tzregister">注册</el-link>
      <el-link href="#" underline="hover" @click="goToLogin">登录</el-link>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onBeforeUnmount } from 'vue'
import request from '@/request'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
const router = useRouter();
// 找回密码表单数据
const resetForm = reactive({
  method: 'username_or_email',
  username: '',
  // emailCode: '',
  new_password: '',
  second_password: ''
});
// 找回密码表单验证规则
const resetRules = reactive({
  username: [
    { required: true, message: '请输入用户名或邮箱', trigger: 'blur' }
  ],
  new_password: [
    { required: true, message: '请输入新密码', trigger: 'blur' },
    { min: 6, max: 20, message: '密码长度在6到20个字符', trigger: 'blur' }
  ],
  second_password: [
    { required: true, message: '请确认新密码', trigger: 'blur' },
    {
      validator: (rule, value) => {
        if (value !== resetForm.new_password) {
          return new Error('两次输入的密码不一致')
        }
        return true
      }, trigger: 'blur'
    }
  ]
})

// 修改密码逻辑
function handleResetPassword() {
  request({
    url: '/users/pwdlogin/', 
    method: 'put',
    data: {
      username: resetForm.username,
      new_password: resetForm.new_password,
      second_password: resetForm.second_password
    }
  }).then((resp) => { 
    console.log(resp.data);
    if (resp.data.code === 201) {
      ElMessage.success('密码修改成功');
      router.push('/login'); // 跳转登录页
    } else {
      ElMessage.error(resp.data.message || '密码修改失败');
    }
  })
    .catch((error) => { 
      console.error('请求失败:', error);
      ElMessage.error('密码修改请求失败，请稍后重试');
    });
}
let timer = null

// const sendEmailCode = () => {
//   if (countDown.value > 0) return
//   // 这里可添加发送验证码的逻辑，如调用后端接口
//   console.log('发送验证码到邮箱:', resetForm.usernameOrEmail)
//   countDown.value = 60
//   timer = setInterval(() => {
//     countDown.value--
//     if (countDown.value <= 0) {
//       clearInterval(timer)
//     }
//   }, 1000)
// }


// 组件销毁时清除定时器
onBeforeUnmount(() => {
  if (timer) {
    clearInterval(timer)
  }
})

// 跳转首页
const gethome = () => {
  router.push('/')
}
// 跳转登录
const goToLogin = () => {
  router.push('/login')
}
// 跳转注册
const Tzregister = () => {
  router.push('/register')
}
</script>

<style scoped>
.reset-password-container {
  max-width: 400px;
  margin: 50px auto;
  padding: 0 20px;
}

.box-card {
  padding: 20px;
  border-radius: 5px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}

.card-header {
  display: flex;
  justify-content: center;
  font-size: 20px;
  font-weight: bold;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 20px;
}
</style>